<template>
  <div>
    <div class="xieyi">
        <van-image  :src="canvasdata" v-if="canvasdata" />
      <div class="container toprint" id="printcontent" v-show="textshow" >
        <h3 style="text-align: center;letter-spacing:5px">车企惠租车协议</h3>
        <div style="text-align: right;padding-right:50px;">
          编号【
          <span style="min-width: 40px;" id="PROTOCOL_YEAY">2019</span>】
          第
          <span style="min-width: 50px;" id="XYBH">xxxx</span> 号
        </div>
        <div style="text-align:center">
          甲方：________
          <span class="reserve" style="min-width: 120px;" id="A_NAME">&nbsp;</span>
          身份证号：________
          <span
            class="reserve"
            style="min-width: 180px;"
            id="A_ID_CARD"
          >&nbsp;</span>
          联系电话：________
          <span class="reserve" style="min-width: 150px;" id="A_PHONE">&nbsp;</span>
        </div>
        <div style="height:30px;margin-top:10px;text-align:center">
          乙方：___________
          <span class="reserve" style="min-width: 300px;" id="B_CORP_NAME">&nbsp;</span>
        </div>
        <div>&emsp;&#12288;甲乙双方依照合同法等规定，经友好协商，就甲方将自有车辆出租给乙方公司事宜达成如下协议：</div>
        <div>
          1、甲方将自有车辆出租给乙方，甲方同意乙方转租给甲方所在单位
          <span
            class="reserve"
            style="min-width: 260px;"
            id="A_GZDW"
          >gs</span> 用于分时、零星因公使用。车牌号：
          <span class="reserve" style="min-width: 120px;" id="CAR_PLATE">cph</span>，车辆所有人：
          <span class="reserve" style="min-width: 120px;" id="OWNER_NAME">clsyr</span>。
        </div>
        <div>
          2、租赁期限为
          <span class="reserve edit" style="min-width: 40px;" id="LIMIT_YEARS">&nbsp;</span>
          年，自
          <span
            class="reserve edit"
            style="min-width: 50px;"
            id="LIMIT_BEGIN_YY"
          >&nbsp;</span>年
          <span class="reserve edit" style="min-width: 40px;" id="LIMIT_BEGIN_MM">&nbsp;</span>月
          <span class="reserve edit" style="min-width: 40px;" id="LIMIT_BEGIN_DD">&nbsp;</span>日 至
          <span class="reserve edit" style="min-width: 50px;" id="LIMIT_END_YY">&nbsp;</span>年
          <span class="reserve edit" style="min-width: 40px;" id="LIMIT_END_MM">&nbsp;</span>月
          <span class="reserve edit" style="min-width: 40px;" id="LIMIT_END_DD">&nbsp;</span>日，
          期满未提出解除的协议且符合能正常使用的协议视为继续履行。若甲方所在单位未支付租金，经乙方催缴后未果，乙方有权解除本协议。租赁期限不超过乙方与甲方所在单位的《汽车租赁合同》期限。
        </div>
        <div>
          3、乙方向甲方每月支付租金
          <span class="reserve" style="min-width: 80px;" id="RENT_PRICE">&nbsp;</span>元，
          以现金形式支付。租赁期间，甲方的车辆为所在公司提供公务活动时发生的油费，由乙方以油卡的形式提供，油卡的金额，根据私车公用的时间由乙方所在单位确定，略有结余的部分，或弥补停车支出，或由乙方所在单位统一分配。
        </div>
        <div>4、甲方在签本协议前，承诺已经车辆所有人授权，指定甲方为本协议收款人。</div>
        <div>5、租赁期间，车辆的保险费、维修费、折旧费等由甲方办理和承担。甲方车辆毁坏或因交通事故导致的直接及间接损失均由甲方自行承担，和乙方无关。甲方车辆因维修不能正常使用的，租金予以相应扣减。</div>
        <div>6、中途需要变更或解除合同，经双方协商可以解除。</div>
        <div>7、由于本合同涉及的租赁行为为分时指定租赁，在租赁期内乙方未收到甲方所在公司支付的分时租赁租金，乙方无需向甲方支付租金，同时乙方与甲方所在公司的分时指定租赁合同终止或解除，本合同自动终止，并且互不承担违约责任。</div>
        <div>8、本合同履行期间，如遇不可抗力，致使本合同无法继续履行的合同解除，双方互不承担责任。</div>
        <div>9、因履行本合同发生的争议，由当事人协商解决，协商不成的，依法向乙所在地人民法院起诉。</div>
        <div>
          10、其他约定事项：
          <span class="reserve" style="min-width: 260px;" id="NOTE1">_______________</span>
        </div>
        <div>11、未尽事宜，双方再行达成补充协议，效力相同。</div>
        <div>12、本合同一式二份，自双方签字或盖章后生效。</div>

        <div>
          <div class="qrcode" id="qrcode"></div>
        </div>

        <table class width="100%" rules="none">
          <tr>
            <td style="width:50%;height:30px;padding-left: 30px;" align="left">
              甲方（签名）：
              <span class="A_NAME" style="min-width:;">&nbsp;</span>
            </td>
            <td style="width:50%;height:30px;padding-left: 30px;" align="left">
              乙方（盖章）：
              <span class="B_CORP_NAME" style="min-width:;">&nbsp;</span>
            </td>
          </tr>
          <tr>
            <td align="left" style="height:30px;">
              <span style="min-width:90px;display: inline-block;"></span>年
              <span style="min-width:30px;display: inline-block;"></span>月
              <span style="min-width:30px;display: inline-block;"></span>日
            </td>
            <td align="left" style="height:30px;">
              <span style="min-width:90px;display: inline-block;"></span>年
              <span style="min-width:30px;display: inline-block;"></span>月
              <span style="min-width:30px;display: inline-block;"></span>日
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
export default {
  data() {
    return {
      canvasdata: "",
      textshow:true
    };
  },
  created() {
    setTimeout(()=>{
        this.textshow=false
    },100)
  },
  mounted() {
      this.xieyi();
  },
  methods: {
    xieyi() {
      let _vm = this;
      
      //将页面转成canvas
     let a = document.getElementById("printcontent")
      html2canvas(a).then(canvas => {
          
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = (contentWidth / 592.28) * 841.89;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //页面偏移
        var position = 0;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28;
        var imgHeight = (592.28 / contentWidth) * contentHeight;
        var pageData = canvas.toDataURL("image/jpeg", 1.0);
        
        _vm.canvasdata = pageData;
            // var doc = new jsPDF('', 'pt', 'a4');
        
            // //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
            // //当内容未超过pdf一页显示的范围，无需分页
            // if (leftHeight < pageHeight) {
            //   doc.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
            // } else {
            //   while(leftHeight > 0) {
            //       doc.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            //       leftHeight -= pageHeight;
            //       position -= 841.89;
            //       //避免添加空白页
            //       if(leftHeight > 0) {
            //         doc.addPage();
            //       }
            //   }
            // }
        
            // doc.save('租赁协议.pdf');
      });
    }
  }
};
</script>


<style scoped>
.xieyi {
}
</style>